<template>
    <div>
        <el-container>
            <el-main class="bg-whitesmoke">
                <el-row>
                    <el-col :offset="4" :span="16">
                        <el-card>
                            <el-row justify="start">
                                <el-col :span="12">
                                    <h2>
                                        <div align="left">{{ hotel_name }}</div>
                                    </h2>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <div align="left">{{ address }}</div>
                                </el-col>
                            </el-row>
                            <el-row type="flex" align="middle">
                                <el-col :span="12">
                                    <div class="text-overflow">{{ description }}</div>
                                </el-col>
                                <el-col :span="2" :offset="6">
                                    <div align="right">
                                        <del>￥{{ 3 * price }}</del>
                                    </div>
                                </el-col>
                                <el-col :span="2">
                                    <h2>
                                        <p class="price">￥{{ price }}起</p>
                                    </h2>
                                </el-col>
                                <el-col :span="2">
                                    <div>
                                        <a href="#A1">
                                            <div align="right">
                                                <el-button type="primary">选择房间</el-button>
                                            </div>
                                        </a>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row type="flex" align="top" justify="start">
                                <el-col :span="12">
                                    <el-carousel :interval="3000" type="card" height="300px">
                                        <el-carousel-item
                                            v-for="preview_url in preview_urls"
                                            :key="preview_url"
                                        >
                                            <el-image
                                                style="width: 500px; height: 300px"
                                                :src="preview_url"
                                                :fit="fill"
                                            ></el-image>
                                        </el-carousel-item>
                                    </el-carousel>
                                </el-col>
                                <el-col :span="12">
                                    <el-row type="flex" align="middle">
                                        <el-col :span="10" :offset="2">
                                            <h2>
                                                <p class="rate">{{ rate }}分 {{ rateDescribe(rate) }}</p>
                                            </h2>
                                        </el-col>
                                        <el-col :span="12">
                                            <div align="left">
                                                <el-tooltip
                                                    class="item"
                                                    effect="dark"
                                                    content="房间很大，比较宽敞，干净敞亮，采光也不错，是家庭式套房，非常适合家庭出游，管家小张服务很好哟，出行也很方便"
                                                    placement="top-start"
                                                >
                                                    <el-button>房间很大，比较宽敞，干净敞亮...</el-button>
                                                </el-tooltip>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
                <div id="A1"></div>
                <el-row>
                    <el-col :offset="4" :span="16">
                        <el-card :body-style="{ padding: '0px' }">
                            <el-row type="flex" align="middle" v-for="room in rooms" :key="room">
                                <el-col :span="3">
                                    <el-image
                                        style="width: 100px; height: 100px"
                                        :src="room.previewUrl"
                                        :fit="fill"
                                    ></el-image>
                                    <h5>{{ room.type }}</h5>
                                </el-col>
                                <el-col :span="3">可住{{ room.capacity }}人</el-col>
                                <el-col :span="3">{{ room.bedType }}</el-col>
                                <el-col :span="9">
                                    可吸烟
                                    <br />30分钟内可免费取消
                                </el-col>
                                <el-col :span="3">
                                    <h2>
                                        <p class="roomPrice">￥{{ room.price }}</p>
                                    </h2>
                                </el-col>
                                <el-col :span="3">
                                    <el-button
                                        type="warning"
                                        @click="bookRoom(room.id, room.type, room.bedType, room.breakfast, room.capacity, room.price)"
                                    >预定</el-button>
                                </el-col>
                            </el-row>
                        </el-card>
                        <el-card>
                            <el-row>
                                <el-col :span="4">
                                    <h2 align="start">点评</h2>
                                    <h3 align="left">
                                        <p class="comment">({{ comment_num }}真实住客点评)</p>
                                    </h3>
                                </el-col>
                                <el-col :span="20">
                                    <h1>
                                        <p class="rate">
                                            {{ rate }}分
                                            <br />
                                            {{ rateDescribe(rate) }}
                                        </p>
                                    </h1>
                                </el-col>
                            </el-row>
                        </el-card>
                        <el-card>
                            <el-row v-for="comment in comments" :key="comment">
                                <el-col :span="4">
                                    <div align="left">
                                        Id为
                                        <div style="color: rgb(0, 174, 255);">{{ comment.userId }}</div>的用户评论：
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <h3>
                                        <p
                                            class="rate"
                                        >{{ comment.rate }}分 {{ rateDescribe(comment.rate) }}</p>
                                    </h3>
                                </el-col>
                                <el-col :span="16">
                                    <div align="left">{{ comment.message }}</div>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>


<script>
import axios from "axios";
// import { ca } from "element-plus/lib/locale";
export default {
    data: function () {
        return {
            id: 1297,
            hotel_name: '初见时光服务式公寓(成都太古里店)',
            address: '中国，四川，成都，锦江区，下东大街喜年广场B座3209室',
            description: '公寓位于成都繁华核心地段，拥有成都名片之称的太古里区域，公寓房间可俯瞰太古里全景，下楼即可到太古里、春熙路步行街、IFS，步行5分钟即到合江亭兰桂坊、王府井、太平洋、群光百货等，地理位置优越，交通便捷，出行方便。公寓楼下可尝遍成都美食，陈赫的贤合庄火锅、黄晓明的烧江南、廖健的谭鸭血火锅、小龙坎火锅、大龙燚火锅、冒椒火辣串串等网红店，三圣街小吃一条街，各种网红奶茶店让您轻松玩遍成都，吃遍成都美食，您还可以告知我们美食需求，让我们为您提供地道的建议。公寓是一家以创意时尚西雅概念为主题、全方面贴心服务为经营理念的现代化高有服务式公寓，还配有24小时贴心管家将尽全力满足您的一切需求。公寓采用现代时尚轻奢风设计理念，专属服务，客房内全面覆盖高速WiFi，房间可俯瞰太古里全景，视野开阔，我们拥有高品质纯客房，房间面积达50平米，24小时不间断可持续热水可以洗去一天的疲惫，房间采用星级高端品牌床垫斯林百兰，只为能让你在旅途中轻松入睡，房间都配有高级且丰富的洗浴用品，洗衣机、迷你小冰箱，高清投影，电吹风等设配。以悠然之态，尊享悠然旅途，以时尚之容，彰显独特魅力。',
            rate: 4.5,
            comment_num: 263,
            price: 119,
            lng: 109,
            lat: 35,
            preview_urls: [
                'http://pix4.agoda.net/hotelimages/1297/0/bd87a86dccd8e39d308ef076bbcc4b23.jpg?s=312x',
                'http://pix3.agoda.net/hotelimages/129/1297/1297_18122813570070896489.jpg?s=312x',
                'http://pix4.agoda.net/hotelimages/129/1297/1297_17062019470053906921.jpg?s=312x',
                'http://pix1.agoda.net/hotelimages/129/1297/1297_17092809340056881861.jpg?s=312x',
                'http://pix2.agoda.net/hotelimages/129/1297/1297_17092809340056881862.jpg?s=312x'
            ],
            rooms: [{
                id: 1,
                hotelId: 1297,
                capacity: 2,
                price: 100,
                previewUrl: 'http://pix4.agoda.net/hotelimages/1297/0/bd87a86dccd8e39d308ef076bbcc4b23.jpg?s=312x',
                breakfast: 1,
                type: '双床房',
                bedType: '两张单人床'
            }, {
                id: 2,
                hotelId: 1297,
                capacity: 3,
                price: 150,
                previewUrl: 'http://pix3.agoda.net/hotelimages/129/1297/1297_18122813570070896489.jpg?s=312x',
                breakfast: 1,
                type: '大床房',
                bedType: '一张大床'
            }],
            comments: [{
                id: '1',
                nickName: '小明',
                avaratUrl: '',
                message: '互联网真的是太潮辣受窘飞机偶爱所谓窘境有佛缘过来看机票归功于分类，表空间iu个衣服哟管理会计管理了规格i路过i路u同样的覅u敷一敷哦与否灰灰哦会很艰苦虎骨酒恢复高考教育',
                date: '2022-02-27',
                rate: 5
            }, {
                id: '2',
                nickName: '小红',
                avaratUrl: '',
                message: '[流汗][黄豆]',
                date: '2022-03-04',
                rate: 4
            }]
        }
    },
    methods: {
        rateDescribe: function (rate) {
            if (rate >= 4.9) return '超级棒'
            else if (rate >= 4.8) return '棒'
            else if (rate >= 4.7) return '很好'
            else if (rate >= 4.6) return '好'
            else if (rate >= 4.5) return '不错'
            else return ''
        },
        bookRoom: function (roomId, type, bedType, breakfast, capacity, amount) {
            // 带着参数跳转到下订单页面
            var self = this;
            console.log(roomId);
            console.log(type);
            console.log(bedType);
            console.log(breakfast);
            console.log(capacity);
            console.log(amount);
            this.$router.push({
                name: 'order',
                params: {
                    hotelId: self.id,
                    hotelName: self.hotel_name,
                    roomId: roomId,
                    type: type,
                    bedType: bedType,
                    breakfast: breakfast,
                    capacity: capacity,
                    amount: amount
                }
            })
        },
        getHotelInfo: function (hotelId) {
            //获得酒店信息
            var self = this;
            axios({
                method: 'get',
                url: '/api/hotel/gethotel',
                params: {
                    id: hotelId
                }
            }).then(function (res) {
                // console.log(res.data.data);
                var data = res.data.data;
                self.hotel_name = data.name;
                self.address = data.address;
                self.price = data.price;
                self.star = data.star;
                self.rate = data.rate;
                self.lat = data.lat;
                self.lng = data.lng;
                self.description = data.description;
                self.comment_num = data.commentNum;
            });

        },
        getHotelComments: function (hotelId) {
            // 获取酒店评论
            var self = this;
            axios({
                method: 'get',
                url: '/api/comment/get_hotel/',
                params: {
                    id: hotelId
                }
            }).then(function (res) {
                // console.log(res.data.data);
                self.comments = res.data.data;
            });
        },
        searchHotelRooms: function (hotelId) {
            // 获取酒店房间
            var self = this;
            axios({
                method: 'get',
                url: '/api/hotel/search_room/',
                params: {
                    id: hotelId
                }
            }).then(function (res) {
                // console.log(res.data.data);
                self.rooms = res.data.data;
            });
        }
    },
    async mounted() {
        axios.defaults.baseURL = "http://localhost:8080"
        this.id = this.$route.params.id
        this.getHotelInfo(this.id);
        this.getHotelComments(this.id);
        this.searchHotelRooms(this.id);
    }
}
</script>

<style scoped>
p.price {
    color: #409eff;
    text-align: right;
}

p.comment {
    color: darkgray;
}

p.rate {
    color: #409eff;
    text-align: left;
}

p.roomPrice {
    color: #409eff;
}

.text-overflow {
    width: 31em;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

.el-row {
    margin-button: 20px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-whitesmoke {
    background: whitesmoke;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>
